﻿<!DOCTYPE html>
<html lang="zh" class="no-js">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport"
		content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
	<title>详细介绍页</title>
	<meta name="description" content="Description...">
	<meta name="keywords" content="keyword1,keyword2,keyword3..">
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<link href="fonts/FontAwesome/font-awesome.css" rel="stylesheet">
	<link href="css/animate.css" rel="stylesheet">
	<link href="css/bootsnav.css" rel="stylesheet">
	<link href="plugin/swiper3/css/swiper.min.css" rel="stylesheet">
	<link href="css/style.css" rel="stylesheet">
	<script src="js/jquery-1.10.1.js"></script>
	<script src="js/prefixfree.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/bootsnav.js"></script>
	<script src="plugin/swiper3/js/swiper.min.js"></script>
	<script src="plugin/swiper3/js/swiper.animate1.0.2.min.js"></script>
	<!-- <script src="js/public.js"></script> -->
	<script src="js/wow.min.js"></script>
	<script src="js/jquery.mixitup.js"></script>
	<script>
		var wow = new WOW({
			boxClass: 'wow',
			animateClass: 'animated',
			offset: 0,
			mobile: false,
			live: true
		});
		wow.init();
		$(function () {
			$("#portfolio").mixItUp();

		})
	</script>
	<!--[if lt IE 9]>
	  <script src="js/html5shiv.min.js"></script>
	  <script src="js/respond.min.js"></script>
	<![endif]-->
	<script>
		function scro() {
			if ($(document).scrollTop() > 50) {
				$(".headerBg").addClass("active");
			} else {
				$(".headerBg").removeClass("active");
			}
		}
		scro();
		$(window).scroll(function () {
			scro();
		})
	</script>
	<style>
		[v-cloak] {
			display: none;
		}
	</style>
</head>

<body>
	<div id="app" v-cloak>

		<!-- 头部 start -->
		<header class="headerBg fixed-top">
			<div class="container-fluid">
				<div class="logo"><a href="#"><img :src="companyInfo.logoUrl" class="img-responsive" alt=""
							width="100%"></a></div>
				<div class="menuBtn">
					<span></span>
					<span></span>
					<span></span>
				</div>
				<div class="hdRig clearfix">
					<div class="header_phone">
						<div class="icon_phone pt5 fl"><img src="images/icon_phone.png"></div>
						<div class="phone fl">
							<h4>Service phone：</h4>
							<h2>{{companyInfo.phone}}</h2>
						</div>
					</div>
				</div>
				<div class="clear"></div>
				<div class="navBox hidden-xs hidden-sm">
					<ul class="navList list-unstyled">
						<li class="navLi">
							<h3><a href="index_en.html"><span>Home</span></a></h3>
						</li>
						<!-- <li class="navLi">
	<h3><a href="javascript:void(0)"><span>解决方案</span></a></h3>
  </li> -->
						<li class="navLi">
							<h3><a href="Product-services_en.html"><span>Product</span></a></h3>
							<div class="navSub">
								<ul class="navSubList list-unstyled">
									<li v-for="item in productCategory" :key="item.id" class="navSubLi">
										<h4><a :href="`Product-services_en.html?id=${item.id}`">{{item.productName}}</a>
										</h4>
									</li>
								</ul>
							</div>
						</li>
						<!-- <li class="navLi">
	<h3><a href="Cases.html"><span>客户案例</span></a></h3>
  </li> -->
						<!-- <li class="navLi">
	<h3><a href="javascript:void(0)"><span>About</span></a></h3>
	<div class="navSub">
	  <ul class="navSubList list-unstyled">
		<li class="navSubLi">
		  <h4><a href="onepage.html">公司简介</a></h4>
		</li>
		<li class="navSubLi">
		  <h4><a href="contact.html">联系方式</a></h4>
		</li>
		<li class="navSubLi">
		  <h4><a href="culture.html">企业文化</a></h4>
		</li>
		<li class="navSubLi">
		  <h4><a href="course.html">企业历程</a></h4>
		</li>
		<li class="navSubLi">
		  <h4><a href="news.html">新闻动态</a></h4>
		</li>
		<li class="navSubLi">
		  <h4><a href="Recruitment.html">人才招聘</a></h4>
		</li>
	  </ul>
	</div>
  </li> -->
						<li class="navLi">
							<h3><a href="onepage_en.html"><span>About</span></a></h3>
						</li>
						<li class="navLi">
							<h3><a href="contact_en.html"><span>Contact</span></a></h3>
						</li>
						<!-- <li class="navLi">
	<h3><a href="Cooperation.html"><span>合作伙伴</span></a></h3>
  </li> -->
						<li class="navLi language">
							<a href="detailed.html">
								<span>
									中文
								</span>
							</a>
							&nbsp;&nbsp;/&nbsp;&nbsp;
							<a href="detailed_en.html">
								<span class="active">
									English
								</span>
							</a>
						</li>
					</ul>
				</div>
				<div class="navBoxm"></div>
			</div>
		</header>
		<!-- 头部 end -->
		<div class="content-wrap"></div>
		<div class="clearfix"></div>
		<div class="bannerN" style="height: 300px">
			<div class="imgFull"><img src="http://www.ztsy-plastics.com/images/ny2.jpg" class="img-responsive"></div>
			<h2 class="banH2 wow fadeInUp">{{productInfo.productDetailName}}</h2>
			<h4 class="banH4 wow fadeInUp">{{productInfo.productDetailIntroduce}}</h4>
		</div>
		<div class="mainBg box1Bg backgroundf0">
			<div class="container">
				<div class="detailed-style">
					<!-- <div class="title_name">
						<h3 class="mb-2">{{productInfo.productDetailName}}</h3>
					</div> -->
					<div class="detailed-info">
						<div>
							<el-carousel height="300px">
								<el-carousel-item style="display: flex;justify-content: center;"
									v-for="item in productInfo.urlList" :key="item">
									<img :src="item.picUrl" alt="" srcset="">
								</el-carousel-item>
							</el-carousel>
						</div>
						<p style="text-align: center;margin: 30px 0;word-break: break-all;">{{productInfo.productDetail}}</p>
						<p style="text-align: end;">creation time：{{productInfo.createTime}} </p>
					</div>
					<!-- <div class="article-operation" style="display: flex;justify-content: space-between;">
						<a href="#" class="col-xs-12 col-sm-6 col-md-6 text-left">上一个产品：文章标题</a>
						<a href="#" class="col-xs-12 col-sm-6 col-md-6 text-right">下一个产品：文章标题</a>
					</div> -->

				</div>
			</div>
		</div>
		<footer class="footerBg">
			<div class="container">
				<div class="footTop">
					<div class="footTopR text-right">
						<div class="clear">Service phone：</div>
						<p class="fTel">{{companyInfo.phone}}</p>
						<!-- <p>（周一至周五8:30-17:30）</p> -->
					</div>
					<div class="footTopL">
						<ul class="footLink list-unstyled">
							<li>
								<h3><a class="ellipsis" href="index_en.html">Home</a></h3>
							</li>
							<li>
								<h3><a class="ellipsis" href="Product-services_en.html">Product</a></h3>
								<div class="footSub">
									<div class="footSub-item" v-for="item in productCategory.slice(0,5)" :key="item.id">
										<a class="ellipsis"
											:href="`Product-services_en.html?id=${item.id}`">{{item.productName}}
										</a>
									</div>
									<div v-if="productCategory.length > 5" class="footSub-item">
										<a class="ellipsis" :href="`Product-services_en.html`" style="color:#ff0000">MORE
										</a>
									</div>
								</div>
							</li>
							<li>
								<h3><a class="ellipsis" href="onepage_en.html">About</a></h3>
							</li>
							<li>
								<h3><a class="ellipsis" href="contact_en.html">Contact</a></h3>
							</li>
						</ul>
					</div>
					<div class="clear"></div>
				</div>

			</div>
			<div class="footBot">
				<p>Copyright © 2024 {{companyInfo.companyName}} </p>
				<div class="clear"></div>
			</div>
		</footer>
	</div>


</body>
<script src="js/axios.min.js"></script>
<script src="js/vue.min.js"></script>
<script src="js/config.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
	new Vue({
		el: '#app',
		data() {
			return {
				carouselChart: [], // 轮播图
				companyInfo: {},
				productCategory: [],
				id: '',
				productInfo: {
					"id": '',
					"productId": '',
					"productDetail": "",
					"productDetailIntroduce": "",
					"productDetailName": "",
					"productDetailUrl": "",
					"createTime": "",
					"updateTime": "",
					"urlList": []
				}
			}
		},
		methods: {
			init() {
				this.getCompanyBasicData()
				this.getProductCategory()
				this.getProductInfo()
			},

			// 公司基本信息
			async getCompanyBasicData() {
				const res = await axios.get(basicUrl +
					'/company/companyInformation/detail?zhCn=0') // 调用API接口获取用户列表
				this.companyInfo = res.data.data
			},

			// 产品分类
			async getProductCategory() {
				const res = await axios.get(basicUrl +
					'/company/companyProduct/list?zhCn=0')
				this.productCategory = res.data.data
				console.log(this.productCategory);
				// 创建 script 标签
				var script = document.createElement('script');
				// 设置 script 标签的 src 属性为要引入的脚本路径
				script.src = './js/public.js';
				// 获取 head 元素
				var head = document.getElementsByTagName('head')[0];
				// 在 head 中添加 script 标签
				head.appendChild(script);
			},
			// 产品详情
			async getProductInfo() {
				const res = await axios.get(basicUrl +
					`/company/companyProductDetail/detailById?id=${this.id}&zhCn=0`)
				this.productInfo = res.data.data
				console.log(this.ProductInfo);
			},

		},
		mounted() {
			const urlParams = new URLSearchParams(window.location.search);
			const id = urlParams.get('id');
			this.id = id
			this.init()
		}
	});
</script>

</html>
<style>
</style>